<template>
  <div class="nav">
    <ul>
      <li
        v-for="(item, i) in routes"
        :key="item.path"
        :class="{ active: i == $store.state.index }"
        @click="setIndex(item,i)"
      >
        <router-link class="router-link" :to="item.path">
          <i :class="item.meta.icon"></i>
          {{ item.meta.til }}</router-link
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { routes } from "./router";
import {Message} from 'element-ui'
export default {
  data() {
    return {
      // index:0
    };
  },
  watch: {
    index() {
      this.setIndex();
    },
  },
  computed: {
    routes() {
      return routes.filter((item) => !item.isHidden);
    },
  },
  methods: {
    setIndex(item,i) {
      // this.$emit('setindex',this.index)
      this.$store.commit("setIndex", i);
      console.log(this.$store.state.index);
      if(item.path == '/mine' && this.$store.state.token == ''){
          this.$message.error('请先登录');
          // this.$router.push({path:'/login',replace:true})
          this.$router.replace({path: '/login'})
      console.log( this.$store.state.token,"yopp");

      }
      if(item.path == '/car' && this.$store.state.token == ''){
          this.$message.error('请先登录');
          // this.$router.push({path:'/login',replace:true})
          this.$router.replace({path: '/login'})
      }
    },
  },
  mounted() {},
};
</script>

<style scoped>
.nav {
  /* background: rgb(255, 126, 244); */
  height: 6.6vh;
}
ul {
  border-top: 0.1vh solid #aaa;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  /* background: white; */
}
ul li {
  height: 6.5vh;
  text-align: center;
  flex: 1;
  /* border: 1px solid #000; */
  list-style: none;
}
.router-link {
  display: flex;
  flex-direction: column;
}
ul li a {
  text-decoration: none;
  font-size: 1.5vh;
  color: #aaa;
}
ul li i {
  font-size: 4vh;
  color: #000;
}
ul .active i {
  color: #409eff;
}
ul .active a {
  color: #409eff;
}
</style>